<template>
  <view class="learning-stats">
    <!-- 荣耀榜 -->
    <view class="headtab">
      <u-tabs :list="tabs" :current="currentTab" @click="handleTabClick" lineColor="#c4996c"  itemStyle="flex:1; height: 48px;" :activeStyle="{
        color: '#c4996c',
        fontWeight: 'bold'
      }" :inactiveStyle="{
        color: '#333',
        fontSize: '28rpx'
      }"></u-tabs>
    </view>

    <view class="stats-section">
      <view class="section-title">学习时长</view>
      <view class="ranking-list" v-if="showlearningDuration">
        <view class="ranking-item" v-for="(item, index) in learningDuration" :key="index">
          <view class="rank-badge" :class="'rank-' + (index + 1)">
            第{{ numberToChinese(index + 1) }}名
          </view>
          <text class="name">{{ item.name }}</text>
          <text class="value">时长{{ item.data }}</text>
        </view>
      </view>
      <view class="ranking-list" v-else>
        <Empty :emptyInfo="emptyInfo" />
      </view>
    </view>
    <view class="stats-section">
      <view class="section-title">考试通过率</view>
      <view class="ranking-list" v-if="showpassRates">
        <view class="ranking-item" v-for="(item, index) in passRates" :key="index">
          <view class="rank-badge" :class="'rank-' + (index + 1)">
            第{{ numberToChinese(index + 1) }}名
          </view>
          <text class="name">{{ item.name }}</text>
          <text class="value">{{ item.data }}%</text>
        </view>
      </view>
      <view class="section-title" v-else>
        <Empty :emptyInfo="emptyInfo" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { studyApi } from "@/api";
import { IMG_URL2 } from "@/config";
import Empty from "@/components/empty.vue";

const EmptyImage = ref(IMG_URL2 + "empty/normal.png");
const emptyInfo = ref({
  image: EmptyImage,
  width: 300,
  height: 300,
  tip: "暂无数据~"
});
const currentTab = ref(0)
const tabs = ref([
  { name: '区域' },
  { name: '全国' },
  { name: '店铺' }
])
let showlearningDuration= ref(true)
const learningDuration = ref([])

let showpassRates= ref(true)
const passRates = ref([])

const handleTabClick = (item) => {
  currentTab.value = item.index
  getData(currentTab.value)
}

const numberToChinese = (num) => {
  const chinese = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
  return chinese[num - 1]
}

const getData = async (condition) => {
  const params = {
    condition: condition
  }
  const res = await studyApi.STUDYGETRANKBYCONDITION(params)
  console.log(res)
  if (res.code == 200) {
    learningDuration.value = res.result.filter(item => item.type == 1)
    if(learningDuration.value.length==0){
      showlearningDuration.value=false
    }else{
      showlearningDuration.value=true
    }
    
    passRates.value = res.result.filter(item => item.type == 2)
    if(passRates.value.length==0){
      showpassRates.value=false
    }else{
      showpassRates.value=true
    }
  }

}
onLoad((options) => {
  getData(currentTab.value)
});

</script>

<style lang="scss" scoped>
.learning-stats {
  min-height: 100vh;
  background-color: #fff;
  .headtab {
      width: 100%;
      background: #fff;
      padding: 24rpx 24rpx 0 24rpx;
      box-sizing: border-box;
      position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 20rpx solid #f5f5f5;
    }
  .stats-section {
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    .section-title {
      font-size: 32rpx;
      color: rgba(193, 122, 50, 1);
      font-weight: bold;
      margin-bottom: 30rpx;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 26px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;

    }

    .ranking-list {
      .ranking-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        padding: 20rpx;
        box-sizing: border-box;
        background-color: #fff;

        .rank-badge {
          padding: 6rpx 10rpx;
          box-sizing: border-box;
          border-radius: 6rpx;
          font-size: 24rpx;
          color: #fff;
          margin-right: 20rpx;
          min-width: 100rpx;
          text-align: center;

          &.rank-1 {
            background-color: rgba(214, 142, 68, 1);
          }

          &.rank-2 {
            background-color: rgba(166, 166, 166, 1);
          }

          &.rank-3 {
            background-color: rgba(228, 159, 118, 1);
          }
        }

        .name {
          flex: 1;
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.9);
        }

        .value {
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.6);
        }
      }
    }
  }
}

// Custom tab styles
:deep(.u-tabs__wrapper__nav__item) {
  &.u-tabs__wrapper__nav__item--active {
    color: #c4996c !important;
    font-weight: bold;
  }
}

:deep(.u-tabs__wrapper__nav__line) {
  background-color: #c4996c !important;
}
</style>